<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>滚动加载更多</title>
     <style type="text/css">
         body,div{
             margin:0;
             padding:0;
        }
        body{
            width: 100%;
            background-color: #ccc;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            border: 1px solid gold;
        }
        /* 第二步：把样式写好 */
        .box{
            width: 900px;
        }
        .load_div{
            width: 400px;
            height: 300px;
            background-color: red;
            float: left;
            margin: 10px;
        }
        .load_div2{
            width: 400px;
            height: 300px;
            float: left;
            margin: 10px;
            background: #000;
        }
    </style>
</head>
<body>
    <!-- 第一步：写好默认展开的div -->
    <div class="box">
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    <div class="load_div"></div>
    </div>
</body>
<script src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    //第三步：开始写js
    //添加滚动事件
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();//获取窗口滚动条距离顶部的距离
        var seeHeight = $(window).height();//浏览器可视高度
        var totalHeight = $(document).height();//整个文档高度，就是整个body展开的高度
        
        //整个文档高度减去可视高度的小于等于滚动条距离顶部的高度
        //说明滚动条已经到达底部需要加载新数据了
        //这里大家可以使用console.log把数据说出在控制台，这样子更直观
        console.log(scrollTop,seeHeight,totalHeight);
        if((totalHeight-seeHeight)<=scrollTop){
           var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';
            $('.box').append(htmlText);
        }
    })
</script>
</html>